<template>
  <div :class="[
    'el-tips',
    type ? `el-tips--${type}` : ''
  ]">
    <div :class="[type ? `el-tips-title--${type}` : 'el-tips-title--default']"><span><b>{{ get_title }}</b></span></div>
      <slot></slot>
    
  </div>
</template>

<script>
export default {
  name: 'ElTips',
  props: {
    type: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    get_title() {
      switch (this.type) {
        case 'danger':
          return '危险';
        case 'warning':
          return '警告';
        default:
          return '提示';
      }
    }
  }
}
</script>

<style>
@charset "UTF-8";

.el-tips--default,
.el-tips--warning,
.el-tips--danger {
  padding: 8px 16px;
  border-radius: 6px;
  margin: 0;
  page-break-inside: avoid;
}

.el-tips {
  margin: 16px 0;
  width: 100%;
}

.el-tips p {
  text-indent: 0em ;
  font-size: var(--page-font-size);
}

.el-tips--default {
  background-color: #ecf8ff;
  border-left: 5px solid #50bfff;
}

.el-tips--warning {
  background-color: #fcf4dc;
  border-left: 5px solid #ebba37
}

.el-tips--danger {
  background-color: #fde4e8;
  border-left: 5px solid #fe6c6f
}

/* default */
.el-tips-title--default {
  /* text-indent: 0.5em !important; */
  margin-top: 5px;
  margin-bottom: 8px;
}

.el-tips-title--default span {
  color: #50bfff !important;
  font-size: 16px;
  line-height: 20px;
  vertical-align: middle;
  /* 确保图标垂直居中 */
}

.el-tips-title--default::before {
  content: "";
  display: inline-block;
  /* background-size: 1.5em 1.5em;  */
  width: 1.5em;
  height: 1.5em;
  background-image: url('/.vitepress/assets/public/tip/info.svg');
  background-size: cover;
  /* 或者 contain，根据需要 */
  margin-right: 5px;
  /* 可以根据需要调整间距 */
  vertical-align: middle;
  /* 确保图标垂直居中 */
}

/* warning */
.el-tips-title--warning {
  /* text-indent: 0.5em; */
  margin-top: 5px;
  margin-bottom: 8px;
}

.el-tips-title--warning span {
  color: #ebba37 !important;
  font-size: 16px;
  line-height: 20px;
  vertical-align: middle;
  /* 确保图标垂直居中 */
}

.el-tips-title--warning::before {
  content: "";
  display: inline-block;
  /* background-size: 1.5em 1.5em;  */
  width: 1.5em;
  height: 1.5em;
  background-image: url('/.vitepress/assets/public/tip/warning.svg');
  background-size: cover;
  /* 或者 contain，根据需要 */
  margin-right: 5px;
  /* 可以根据需要调整间距 */
  vertical-align: middle;
  /* 确保图标垂直居中 */
}

/* danger */
.el-tips-title--danger {
  /* text-indent: 0.5em; */
  margin-top: 5px;
  margin-bottom: 8px;
}

.el-tips-title--danger span {
  color: #fe6c6f !important;
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  vertical-align: middle;
  /* 确保图标垂直居中 */
}

.el-tips-title--danger::before {
  content: "";
  display: inline-block;
  /* background-size: 1.5em 1.5em;  */
  width: 1.5em;
  height: 1.5em;
  background-image: url('/.vitepress/assets/public/tip/danger.svg');
  background-size: cover;
  /* 或者 contain，根据需要 */
  margin-right: 5px;
  /* 可以根据需要调整间距 */
  vertical-align: middle;
  /* 确保图标垂直居中 */
}
</style>